<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/js/themes/default/easyui.css">   
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/js/themes/icon.css">  

<script src="<%=request.getContextPath() %>/js/jquery-1.11.2.min.js"></script> 
<script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery.easyui.min.js"></script>

</head>
<body>
<!-- datagrid的展示 -->
<table id="dgs"></table>  


<!-- dialog -->
 <div id="ddd" class="easyui-dialog" title="添加" style="width:400px;height:500px;"   
        data-options="iconCls:'icon-save',resizable:true,modal:true,closed:true,buttons:'#btn'">   
     <div id="dds">    
   	 <form id="addForms" action="">
   		<table>
   			<tr>
   				<td><input type="hidden" name="pid"></td>
   			</tr>
   			<tr>
   				<td>名称：</td>
   				<td><input type="text" name="pname"></td>
   			</tr>
   			<tr>
   				<td>价格：</td>
   				<td><input type="text" name="marketPrice"></td>
   			</tr>
   			<tr>
   				<td>图片路径：</td>
   				<td><input type="text" name="image"></td>
   			</tr>
   			<tr>
   				<td>商品描述：</td>
   				<td><input type="text" name="pdesc"></td>
   			</tr>
   			<tr>
   				<td>是否热门：</td>
   				<td><input type="text" name="isHot"></td>
   			</tr>
   			<tr>
   				<td>上传日期：</td>
   				<td><input type="text" name="pdate"></td>
   			</tr>
   			<tr>
   				<td>所属分类：</td>
   				<td>
   					<select name="csid">
   						<c:forEach items="${list}" var="l">
   							<option value="${l.csid}">${l.csname}</option>
   						</c:forEach>
   					</select>
   				
   				</td>
   			</tr>
   			<tr>
   				<td>库存数量：</td>
   				<td><input type="text" name="umber"></td>
   			</tr>
   			<tr>
   				<td><input type="submit" value="提交"></td>
   			</tr>
   		</table>
   		
   	</form> 
   </div>     
</div> 

<!-- 按钮   -->
<div id="btn">
			<a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'">添加</a>  
			<a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'">取消</a>	  
</div>
<script type="text/javascript">
		$('#dgs').datagrid({
			url:'<%=request.getContextPath() %>/product/getProductList',
			columns:[[
			        {field:'pid',title:'商品ID',width:100},
			        {field:'pname',title:'商品名称',width:100}, 
			        {field:'marketPrice',title:'商品价格',width:100}, 
			        {field:'pdesc',title:'商品描述',width:100}, 
			        {field:'is_hot',title:'热门商品',width:100}, 
			        {field:'pdate',title:'上传日期',width:100}, 
			        {field:'image',title:'上传图片路径',width:100,formatter: function(value,row,index){
							value = '<img style="width:40px; height:30px" src="${pageContext.request.contextPath}/'+value + '">';
							return value;
					}
				}, 
			        {field:'csid',title:'所属二级分类',width:100}, 
			        {field:'umber',title:'商品数量',width:100}
			          
			          
			          ]],
			singleSelect:true,
			fitColumns:true,
			toolbar: [{
				iconCls: 'icon-add',
				handler: function(){
					
					//打开dialog对话框
					$("#ddd").dialog('open');
					//转换form表单为ajax提交
					$('#addForms').form({    
		   				 url:"<%=request.getContextPath() %>/product/addProduct",    
		  				  onSubmit: function(){    
		  					 //首先加载，返回验证
		  					  return $("#addForm").form('validate');    
				   		 },    
				    success:function(obj){    
				    	if(obj){
				    		//加强版弹框
							$.messager.alert("系统提示","保存成功");
							//dialog提交后关闭对话框
				    		$("#ddd").dialog("close");
				    		//datagrid刷新页面
							$("#dgs").datagrid("reload");
						}else{
							$.messager.alert("系统提示","保存失败");
						}    
				    }    
				});  
					
	
				
				}
			},'-',{
				iconCls: 'icon-remove',
				handler: function(){
					//实现删除的共能
					
					var row = $("#dgs").datagrid("getSelected");
					//删除功能
					$.ajax({
						url:"<%=request.getContextPath() %>/product/removeProductByCid",
						type:"post",
						data:{pid:row.pid},
						success:function(obj){
							if(obj==1){
								alert("删除成功");
								$('#dgs').datagrid('reload');
							}
							
						},
						dataType:"text",
					})
				}
			},'-',{
				iconCls: 'icon-edit',
				handler: function(){
				//实现修改的功能	
					var row = $("#dgs").datagrid("getSelected");
					if(row!=null){
						//数据的辉县
						$("#addForms").form('load',row);
						//打开dialog
						$("#ddd").dialog('open');
						//转换表单提交为ajax的提交
						$('#addForms').form({    
			   				 url:"<%=request.getContextPath() %>/product/updateProduct",    
			  				  onSubmit: function(){    
			  					 //首先加载，返回验证
			  					  return $("#addForms").form('validate');    
					   		 },    
					    success:function(obj){    
					    	if(obj){
					    		//加强版弹框
								$.messager.alert("系统提示","修改成功");
								//关闭dialog
					    		$("#ddd").dialog("close");
								//刷新datagrid
								$("#dgs").datagrid("reload");
							}else{
								$.messager.alert("系统提示","修改失败");
							}    
					    }    
					});   
						
					}else{
						$.messager.alert("系统提示","请选择一行");
					}
					
				
					
				
				}
			}
			
			],
			pagination:true,
			pageSize:25,
			pageList:[25,50,75,100,125]
		});


</script>

</body>
</html>